<template>
  <div style="border: 1px solid; padding: 10px;">
    <h4>watch && watchEffect</h4>
    <p>data: {{ info.name }}</p>
    <button @click="editCoco">editMsg</button>
  </div>
</template>

<script>
import {reactive, watch, watchEffect} from "vue";

export default {
  setup() {
    const info = reactive({ name: 'wz' })

    watch(info, (newVal, oldVal) => {
      console.log(`edit`, newVal, oldVal)
    })
    // 刚开始会立即执行，并且会自动收集依赖，当其中的依赖发生改变，都会执行回调函数
    // watchEffect选项中返回的函数是停止监听函数。
    const cancelWatch = watchEffect((onCleanup) => {
      console.log(123, info.name)
      // 在watchEffect函数中需要传入一个回调函数，回调函数存在一个形参，该形参的调用可以传入一个回调函数可以清除副作用。
      onCleanup(() => {
        console.log(`执行clearup函数`)
      })
    })
    const editCoco = () => {
      info.name += 'coco'
      if (info.name.length > 10) {
        cancelWatch()
      }
    }
    return {
      info,
      editCoco
    }
  }
}
</script>

<style>
</style>
